<!--
 * @Author: AHANG
 * @Date: 2022-07-22 16:26:23
 * @LastEditors: AHANG
 * @LastEditTime: 2022-07-23 10:29:24
 * @Description: 
-->
<template>
  <div class="echarts_1" ref="echarts_1"></div>
</template>

<script>
import { mapState } from "vuex";
// import "echarts/theme/macarons.js";
export default {
  name: "echarts1",
  data() {
    return {
      lineColor: "#999",
      countAge: [],
      ageAfterWeighing: [],
      // bodyWidth: document.body.clientWidth,
    };
  },
  watch: {},
  computed: {
    ...mapState("user", {
      studentsAge: (state) => state.studentsAge,
      studentsInfo: (state) => state.studentsInfo,
    }),
  },
  created() {},
  mounted() {
    this.$store.dispatch("user/GET_studentsInfo").then(() => {
      this.getTheCurrentAge();
    });
    //TODO测试用
    // console.log(this.studentsAge);
    // console.log(this.studentsInfo);
    this.getTheCurrentAge();
    // this.getTheCurrentAge();
    this.$nextTick(() => {
      setTimeout(() => {
        // console.log("调用了");
        this.echartsInit();
      }, 10);
    });
  },
  methods: {
    //方法区
    unique(arr) {
      return Array.from(new Set(arr)); //去重
    },
    //获取数量方法
    countNum(arr, res) {
      var newArrays = arr.filter(function (item) {
        return item == res;
      });
      return newArrays.length;
    },
    getTheCurrentAge() {
      this.ageAfterWeighing = this.unique(this.studentsAge);
      // console.log(this.ageAfterWeighing);
      this.ageAfterWeighing.forEach((item, index) => {
        this.countAge.push(
          this.countNum(this.studentsAge, this.unique(this.studentsAge)[index])
        );
      });
      //TODO测试用2
      // console.log(this.studentsAge, "所有年龄"); //所有年龄
      // console.log(this.ageAfterWeighing, "分类后的年龄"); //分类后的年龄
      // console.log(this.countAge, "分类后的年龄数量"); //
    },
    echartsInit() {
      // 找到容器
      let myChart = this.$echarts.init(this.$refs.echarts_1);
      window.onresize = () => {
        myChart.resize();
      };
      // 开始渲染
      myChart.setOption(
        {
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {},
          xAxis: [
            {
              type: "category",
              data: this.ageAfterWeighing,
              axisLine: {
                lineStyle: {
                  color: this.lineColor, //x轴轴线颜色
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: this.lineColor, //x轴轴线颜色
                },
              },
            },
          ],
          label: {
            show: true,
            // 标签的文字。
            formatter: this.ageAfterWeighing,
          },
          legend: {
            show: true,
            left: "3%",
            top: "3%",
            textStyle: {
              //图例文字的样式
              color: this.lineColor,
              fontSize: 14,
            },
          },
          series: [
            {
              name: `年龄数量`,
              type: "bar",
              barWidth: "60%",
              data: this.countAge,
            },
          ],
        },

        true
      );
    },
  },
};
</script>

<style scoped>
.echarts_1 {
  height: 400px;
}
</style>
